<template>
	<scroll-view class="swiper-tab" scroll-x :scroll-left="scrollLeft" :scroll-with-animation="true">
		<view v-for="(item, index) in qgItems" 
			:key="item.index" 
			:class="['swiper-tab-list',index == tabIndex ? 'qg_active' : '']"
			:id="index" 
			
			@tap="gettqg(item, index)" 
			>
			<view class="list-item" >
				<text style="font-size: 24rpx;">{{item.time}}</text>
				<text v-if="item.hs <= gettime && gettime <= item.he" style="font-size: 16rpx;">抢购进行中</text>
				<text v-if="gettime < item.hs" style="font-size: 16rpx;">即将开场</text>
				<text v-if="gettime > item.he" style="font-size: 16rpx;">已开抢</text>
				<!-- <text v-if="index == tabIndex" class="qgactive-item"></text> -->
				<!-- <text v-if="item.hs <= gettime && gettime <= item.he" class="qgactive-item"></text> -->
			</view>
		</view>
			
		
	</scroll-view>
</template>

<script>
	export default {
		
		data() {
			return {
				tabIndex: 0,	//选中项下标
				scrollLeft:0,	//滚动位置
				qgItems:[{
					time:'10:00',
					hs:10,
					he:11
				},{
					time:'热抢好货',
					hs:12,
					he:13
				},{
					time:'11:00',
					hs:14,
					he:15
				},{
					time:'12:00',
					hs:16,
					he:17
				},{
					time:'13:00',
					hs:18,
					he:19
				}
				]
			}
		},
		computed: {
			gettime(){
				// 计算时间
				let state = '已开抢'
				let nowTime = new Date();
				let h =nowTime.getHours();
				
				return h;
			}
		},
		mounted(){
			// console.log(this.gettime)
			for(let i in this.qgItems){
				if (this.qgItems[i].hs <= this.gettime){
					this.tabIndex = i;
					this.scrollLeft = i*50;
				}
			}
		},
		methods: {
			gettqg(item, index) {
				// console.log(JSON.stringify(item))
				if (this.tabIndex !== index) {
					this.tabIndex = index;
					this.scrollLeft = index*50;
					this.$emit('clickItem', item);
				}
			}
		},
	}
</script>

<style scoped>
	.list {
		width: 750rpx;
		height: 100%;
	}
	.swiper-box {
		flex: 1;
		width: 100%;
		height: calc(100% - 100rpx);
	}
	.swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 64rpx;
		height: 116rpx;
		border:0;
		font-size:24rpx;
	}
	.swiper-tab-list {
		/* font-size: 30rpx; */
		width: 150rpx;
		padding: 5rpx 0;
		display: inline-block;
		text-align: center;
		color: #fff;
		background: #000;
		line-height:40rpx;
	}
	.list-item{
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.qg_active {
		color: #fff;
		background:#CC0000;
	}
	.qgactive-item{
		width: 0;
		height: 0;
		border-width: 5rpx;
		border-style: solid;
		border-color: #FF502E transparent transparent transparent;
		position:absolute;
		margin-top:45rpx;
	}
</style>
